<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CCLUB在线笔试</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        .number1{
            color:#fff;
            background-color:#5272ff;
            width:30px;
            height:30px;
            border-radius:50%;
            font-size:24px;
            padding-left:13px;
            padding-top:5px;
            padding-bottom:5px;
        }
        .number2{
            color:#5272ff;
            background-color:#d0d9ff;
            width:30px;
            height:30px;
            font-size:24px;
            border-radius:50%;
            padding-left:13px;
            padding-top:5px;
            padding-bottom:5px;
        }
        .el-form1{
            width:1340px;
            height:480px;
            margin-top:15px;
            margin-left:80px;
            border: 1px solid #ececed;
        }
        .el-must{
            background-color:#f6f6f6;
            border:1px solid #f6f6f6;
            font-size:12px;

        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-left:30px;margin-top:15px;font-size:24px;height:28px;">
        <div style="float:left;">{{name}}</div>
        <div style="float:left;margin-left:1100px;">
            <a href="javascript:void(0);" style="text-decoration:none;color:rgb(60,60,60);font-size:14px;">视频面试</a>
        </div>
        <div style="float:left;margin-left:30px;">
            <el-dropdown placement="bottom-start">
                <span class="el-dropdown-link">{{userInfo.user_company}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="background-color:#f6f8ff;">{{userInfo.user_phone}}</el-dropdown-item>
                    <el-dropdown-item disabled style="font-size:12px;">当前公司:</el-dropdown-item>
                    <el-dropdown-item style="font-size:12px;">&nbsp;&nbsp;&nbsp;{{userInfo.user_company}}</el-dropdown-item>
                    <el-dropdown-item >个人中心</el-dropdown-item>
                    <el-dropdown-item divided>
                        <a href="javascript:void(0);" @click="signOut" style="text-decoration:none;color:rgb(30,30,30);">
                            退出登录
                        </a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    <el-divider></el-divider>
    <div style="margin-left:80px;margin-top:30px;">
        <div>
            <span><a href="javascript:void(0);">
                <img src="../img/back.png" alt="" width="14px" height="14px"></a>
            </span>
            <span>新建在线笔试</span>
        </div>
        <div style="margin-top:15px;width:1340px;height:103px;background-color:#FBFBFF;">
            <div style="margin-left:250px;padding-top:15px;float:left;">
                <div class="number1">1</div>
                <div style="color:#2b313a;font-size:12px;margin-top:15px;margin-left:-15px;">设置考试规则</div>
            </div>
            <div style="float:left;margin-left:350px;padding-top:15px;">
                <div class="number2">2</div>
                <div style="color:#8b8f94;font-size:12px;margin-top:15px;margin-left:-5px;">编辑题目</div>
            </div>
            <div style="float:left;margin-left:350px;padding-top:15px;">
                <div class="number2">3</div>
                <div style="color:#8b8f94;font-size:12px;margin-top:15px;margin-left:10px;">完成</div>
            </div>
        </div>
    </div>
    <div class="el-form1">
        <div style="margin-left:20px;margin-top:20px;">
            <span style="float:left;margin-top:10px;">考试名称</span>
            <span style="float:left;margin-left:30px;">
                <el-input v-model="exam_name" placeholder="(例如,2020年校招后端研发岗)" style="width:350px;"></el-input>
            </span>
        </div>
        <div style="margin-top:80px;background-color:#ececed;width:1300px;height:1px;margin-left:20px;"></div>
        <div style="margin-top:20px;margin-left:20px;">
            <div style="float:left;margin-top:10px;">开始时间</div>
            <div style="float:left;margin-left:30px;">
                <div class="block" style="float:left;">
                    <el-date-picker
                            v-model="date.date1"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div style="float:left;">
                    <el-time-select v-model="date.date2"
                            :picker-options="{start: '08:30',step: '00:15',end: '18:30'}"
                            placeholder="选择时间">
                    </el-time-select>
                </div>
            </div>
        </div>
        <div style="margin-top:80px;margin-left:20px;">
            <span style="margin-top:10px;">考试时长</span>
            <span style="margin-left:25px;">
                <el-input v-model="time_length" placeholder="请输入内容" style="width:120px;"></el-input>
            </span>
            <span style="margin-top:10px;">分钟</span>
        </div>
        <div style="margin-top:20px;margin-left:20px;">
            <span style="">考试开始</span>
            <span style="margin-left:25px;">
                <el-input v-model="ban_time" placeholder="请输入内容" style="width:120px;"></el-input>
            </span>
            <span>分钟后禁止进入</span>
        </div>
        <div style="margin-top:30px;background-color:#ececed;width:1300px;height:1px;margin-left:20px;"></div>
        <div style="margin-left:20px;margin-top:30px;">
            <div style="float:left;">防作弊设置</div>
            <div style="float:left;margin-left:60px;">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="1">打乱题目顺序</el-checkbox>
                    <el-checkbox label="2">打乱选项顺序</el-checkbox>
                    <el-checkbox label="3">打开摄像头</el-checkbox>
                    <el-checkbox label="4">检测页面跳出次数</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div style="margin-left:20px;margin-top:90px;">
            <div style="float:left;">候选人登记信息</div>
            <div style="float:left;">
                <li v-for="(item,index) in list" :key="index" style="float:left;list-style:none;margin-left:25px;">
                    <el-checkbox  v-model="item.checked">
                        {{item.name}}
                    </el-checkbox>
                    <span class="el-must" v-if="item.isMust==='1'">
                        <a href="javascript:void(0);" style="text-decoration:none;color:#5272ff;" @click="setField(item.name,item.isMust)">选填</a>
                    </span>
                    <span class="el-must" v-if="item.isMust==='2'">
                        <a href="javascript:void(0);" style="text-decoration:none;color:#5272ff;" @click="setField(item.name,item.isMust)">必填</a>
                    </span>
                </li>
                <span style="margin-left:30px;">
                    <el-button type="primary" size="mini" @click="addShow">新增字段</el-button>
                </span>
            </div>
        </div>
    </div>
    <div style="margin-top:20px;width:1340px;height:80px;margin-left:80px;">
        <div style="margin-left:500px;margin-top:15px;">
            <span><el-button type="info" plain style="width:150px;" size="small">取消</el-button></span>
            <span style="margin-left:30px;">
                <el-button type="primary" style="width:150px;" size="small" @click="createExam">保存</el-button>
            </span>
        </div>
    </div>
    <!--修改字段-->
    <el-dialog title="编辑字段" :visible.sync="dialogVisible_field" width="30%" before-close="handleClose">
        <div style="width:455px;height:1px;background-color:#ececed;margin-top:-22px;margin-left:-18px;"></div>
        <el-form  label-width="0px">
            <el-form-item style="margin-top:20px;">
                <span>字段名称</span>
                <span style="margin-left:30px;">
                    <el-input v-model="addItem.name" placeholder="请输入内容" style="width:300px;" size="mini"></el-input>
                </span>
            </el-form-item>
            <el-form-item style="margin-top:20px;">
                <span>是否必填</span>
                <span style="margin-left:30px;">
                    <el-radio v-model="addItem.isMust" label="1">选填</el-radio>
                    <el-radio v-model="addItem.isMust" label="2">必填</el-radio>
                </span>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible_field = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            name: 'CCLUB 在线笔试',
            userInfo:{
                user_phone: '18229583486',
                user_company: '茗少集团'
            },
            exam_name: '',
            date:{
                date1: '',
                date2: ''
            },
            time_length: '',
            ban_time: '',
            checkList: [],
            registration_information: [],
            list: [{
                name: '姓名',
                isMust: '2'
            },{
                name: '电话号码',
                isMust: '2'
            },{
                name: '邮箱',
                isMust: '2'
            }],
            addItem:{
                name: '',
                isMust: '1'
            },
            dialogVisible_field: false,
            exam:{}
        },
        created(){
            this.getExamInfo();
        },
        methods:{
            signOut(){

            },
            addShow(){
                this.addItem.name='';
                this.addItem.isMust='';
                this.dialogVisible_field=true;
            },
            setField(name,isMust){
                this.addItem.name=name;
                this.addItem.isMust=isMust;
                this.dialogVisible_field=true;
            },
            add(){
                let obj=new Object();
                let flag=1;
                obj.name=this.addItem.name;
                obj.isMust=this.addItem.isMust;
                for(let i=0;i<this.list.length;i++){
                    if(this.list[i].name===obj.name){
                        flag=0;
                        this.list[i].isMust=obj.isMust;
                    }
                }
                if(obj.name.length===0||obj.isMust.length===0){
                    this.$message({
                        message: '请填好所有必选项',
                        type: 'warning'
                    });
                }else{
                    if(flag===1){
                        this.list.push(obj);
                    }
                    this.dialogVisible_field=false;
                }
            },
            editSubject(){
                window.location.href="/test_editSubject";
            },
            async createExam(){
                let tempList=['姓名','邮箱','电话号码'];
                let isLegal=true;
                for(let i=0;i<tempList.length;i++){
                    let flag=0;
                    for(let j=0;j<this.list.length;j++){
                        if(this.list[j].name===tempList[i]){
                            flag=1;
                            break;
                        }
                    }
                    if(flag===0){
                        console.log(tempList[i])
                        isLegal=false;
                        //break;
                    }
                }
                if(isLegal){
                    let params=new FormData();
                    let date1=this.date.date1;
                    let date2=this.date.date2;
                    let date=null;
                    if(date1.length<=10){
                        date=date1+" "+date2;
                    }else{
                        date=date1.getFullYear()+"-"+(parseInt(date1.getMonth())+1)+"-"+date1.getDate()+" "+date2;
                    }
                    params.append("exam_name",this.exam_name);
                    params.append("exam_start_time",date);
                    params.append("exam_longTime",this.time_length);
                    params.append("exam_noEntry_time",this.ban_time);
                    params.append("exam_Upset_question",this.checkList.indexOf('1')!=-1?1:0);
                    params.append("exam_Upset_answer",this.checkList.indexOf('2')!=-1?1:0);
                    params.append("exam_jumpOut_number",this.checkList.indexOf('3')!=-1?1:0);
                    params.append("exam_recording",this.checkList.indexOf('4')!=-1?1:0);
                    params.append("exam_user_info",JSON.stringify(this.list));
                    params.append("exam_id",this.exam.exam_id!=undefined?this.exam.exam_id:"");
                    let result=await axios({
                        method: 'post',
                        url: '/createExam',
                        data: params,
                    });
                    if(this.exam.exam_id!=undefined){
                        window.location.href="/test_exam";
                    }else{
                        if(result.data.length>0){
                            window.location.href="/test_editSubject/"+result.data;
                        }else{
                            this.$message({
                                type: 'info',
                                message: '新建笔试失败'
                            });
                        }
                    }
                }else{
                    this.$message({
                        message: '姓名,邮箱,电话号码为必填项',
                        type: 'warning'
                    });
                }
            },
            async getExamInfo(){
                let url=window.location.href.split("/");
                if(url[url.length-1]!='all'){
                    let result=await axios.get('/getOneExamInfo?exam_id='+url[url.length-1]);
                    console.log(result.data);
                    this.exam=result.data;
                    this.exam_name=result.data.exam_name;
                    this.time_length=result.data.exam_longTime;
                    this.ban_time=result.data.exam_noEntry_time;
                    this.date.date1=result.data.exam_start_time.split(" ")[0];
                    this.date.date2=result.data.exam_start_time.split(" ")[1];
                    if(result.data.exam_Upset_question===1)this.checkList.push('1');
                    if(result.data.exam_Upset_answer===1)this.checkList.push('2');
                    if(result.data.exam_recording===1)this.checkList.push('3');
                    if(result.data.exam_jumpOut_number===1)this.checkList.push('4');
                    this.list=JSON.parse(result.data.exam_user_info);
                }
            }
        }
    })
</script>
</body>
</html>